<template>
  <div class="rehearse_page">
    <nav-bar id="nav_bar"  ref="nav_bar"/>
    <group-tab-bar ref="group_tab_bar"
                   id="site_tab_bar_box"
                   :handle_click_tab="handle_click_tab"
                   :is_tab_disable="is_tab_disable"/>
    <rehearse_table ref="member_table"
                    :group_code="current_group_code"/>
  </div>

</template>

<script>
import NavBar from "../components/nav-bar/nav_bar"
import Rehearse_table from "@/components/rehearse_table";
import GroupTabBar from "../components/nav-bar/group_tab_bar"

export default {
  name: "Rehearse",
  components: {
    GroupTabBar,
    Rehearse_table,
    NavBar,
  },
  data() {
    return {
      table_data: [],
      current_group_code: this.index2group_code(this.get_default_active_tab()),
    }
  },
  methods: {
    get_default_active_tab() {
      // 返回默认的可读写的团的index
      let perm_code = this.$store.state.perm_code
      if (perm_code === 0) {
        alert("ERROR: get_default_active_tab: perm_code is 0")
        return
      }
      let i = 0
      while (perm_code % 2 === 0) {
        i++
        perm_code /= 2
      }
      return i;
    },
    index2group_code(index) {
      return 1 << parseInt(index)
    },
    handle_click_tab(tab, event) {
      // 点击tab之后修改当前的group_code
      // member_table会自己获取新数据
      this.current_group_code = this.index2group_code(tab.index)
    },
    is_tab_disable(index) {
      // 根据权限决定哪些tab是可以看的
      let binary_str = this.$store.state.perm_code.toString(2)
      let len = binary_str.length - 1
      if (len < index) {
        return true
      } else {
        return binary_str[len - index] === '0'
      }

    }
  },
  mounted() {
    // 设置导航栏和tab的高亮
    this.$refs.group_tab_bar.set_default_active_tab(
        this.get_default_active_tab().toString())
    this.$refs.nav_bar.set_default_active_nav(
        this.$store.state.object_code_dir.type2object_code.排练)
  }
}
</script>

<style scoped>
#nav_bar {
  top: 0;
  position: fixed;
  width: 100%;
  opacity: 1;
  z-index: 90;
}
#site_tab_bar_box {
  width: 100%;
  top: 50px;
  padding-bottom: 50px;
  position: fixed;
  z-index: 100;
  background: #ffffff;
}
</style>